const app=Vue.createApp({
    components:{
        //导航
        'pageNav':{
            data(){
                return{
                    nav:[
                        {name:'音乐馆',url:'#'},
                        {name:'我的音乐',url:'#'},
                        {name:'客户端',url:'#'},
                        {name:'开放平台',url:'#'},
                        {name:'VIP',url:'#'},
                    ],
                    currentIndex:0,
                    showMask:false,
                    showLogin:false
                }
            },
            template:`<div class="top">
                        <div class="topContnet">
                            <h1 class="logo"><img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000"></h1>
                            <ul class="boxNav">
                                <li v-for="(item,index) in nav" :key="index" @click="clickred(index)" :class="{ active: index === currentIndex }">
                                <a :href="item.url">{{item.name}}</a></li>
                            </ul>
                            <div class="search">
                                <div class="searchContent">
                                    <input type="text" class="seache_input" placeholder="搜索音乐、MV、歌单、用户" value>
                                    <button class="search_btn">
                                        <i class="iconfont icon-sousuo"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="header_login">
                                <span class="loginContent">
                                    <a href="#" @click="handleMask">登录</a>
                                    <button class="login_btn">开通VIP</button>
                                    <div class="recharge">充值</div>
                                </span>
                            </div>
                        </div>
                    </div>
                    <transition enter-active-class="animate_animated animate__bounceIn" leave-active-class="animate_animated animate__bounceOut">
                    <div class="mask" v-if="showMask">
                        <i class="iconfont icon-cuowu" @click="stopMask"></i>
                        <transition enter-active-class="animate__animated animate__rollIn animate__delay-5s"leave-active-class="animate_animated animate__rollOut">
                            <div class="login" v-if="showLogin">
                                <h2>登录后更精彩</h2>
                                <input type="text" placeholder="邮箱">
                                <input type="text" placeholder="密码">
                                <button class="content_btn">登录</button>
                                <div class="reg">
                                   <span>注册</span>
                                   <span>忘记密码</span>
                                </div>
                            </div>
                        </transition>
                    </div>
                    </transition>`,
            methods:{
                clickred(index) {
                    this.currentIndex = index;
                },
                handleMask(){
                    this.showMask=!this.showMask;
                    this.showLogin=!this.showLogin;
                },
                stopMask(){
                    this.showMask=!this.showMask;
                    this.showLogin=!this.showLogin;
                }
            }
        }
    }
});
const vm=app.mount("#root");